<template>
  <div>
    <nav v-if="metaRouteRef == 'sobhnasAuth'">
      <ul class="text-sm text-ink hover:text-bay-of-many flex-row gap-2 flex">
        <li>
          <a class="cursor-pointer flex flex-row items-center gap-2" href="/global">Home</a>
        </li>
        <li>
          <a class="cursor-pointer flex flex-row items-center gap-2" href="/global/dietary-needs/sobhnas/5069"><svg
              class="transform-gpu -rotate-90 w-2 h-2 opacity-50" width="16px" height="16px" viewBox="0 0 16 16"
              version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <title>Icons/Chevron down</title>
              <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"
                stroke-linejoin="round">
                <g id="Icons/Chevron-down" stroke="currentColor" stroke-width="1.71428571">
                  <polyline id="Path" points="14 5 8 11 2 5"></polyline>
                </g>
              </g>
            </svg>Sobhna's</a>
        </li>
      </ul>
    </nav>
    <nav v-else-if="metaRouteRef == 'almightyAuth'"
      class="flex flex-row justify-between items-center text-sm text-ink hover:text-bay-of-many">
      <a class="cursor-pointer flex flex-row items-center gap-2" href="/search"><svg
          class="transform-gpu rotate-90 w-3 h-3" width="16px" height="16px" viewBox="0 0 16 16" version="1.1"
          xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>Icons/Chevron down</title>
          <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"
            stroke-linejoin="round">
            <g id="Icons/Chevron-down" stroke="currentColor" stroke-width="1.71428571">
              <polyline id="Path" points="14 5 8 11 2 5"></polyline>
            </g>
          </g>
        </svg>Go back</a>
      <ul class="flex-row gap-2 hidden sm:flex">
        <li>
          <a class="cursor-pointer flex flex-row items-center gap-2" href="/">Home<svg
              class="transform-gpu -rotate-90 w-3 h-3" width="16px" height="16px" viewBox="0 0 16 16" version="1.1"
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <title>Icons/Chevron down</title>
              <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"
                stroke-linejoin="round">
                <g id="Icons/Chevron-down" stroke="currentColor" stroke-width="1.71428571">
                  <polyline id="Path" points="14 5 8 11 2 5"></polyline>
                </g>
              </g>
            </svg></a>
        </li>
        <li>
          <a class="cursor-pointer flex flex-row items-center gap-2" href="/search">Products<svg
              class="transform-gpu -rotate-90 w-3 h-3" width="16px" height="16px" viewBox="0 0 16 16" version="1.1"
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <title>Icons/Chevron down</title>
              <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"
                stroke-linejoin="round">
                <g id="Icons/Chevron-down" stroke="currentColor" stroke-width="1.71428571">
                  <polyline id="Path" points="14 5 8 11 2 5"></polyline>
                </g>
              </g>
            </svg></a>
        </li>
        <li>
          <a class="cursor-pointer flex flex-row items-center gap-2" href="/search?categories=Beverages">Beverages</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
import { onBeforeMount, ref } from "vue";
import { useRoute } from "vue-router";

export default {
  setup() {
    const metaRouteRef = ref("");
    onBeforeMount(() => {
      const $route = useRoute();
      metaRouteRef.value = $route.meta.name;
    });
    return { metaRouteRef };
  },
};
</script>

<style>

</style>
